<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=375, initial-scale=1.0"
			,user-scalable="no"
		/>
		<title>小米官网</title>
        <link rel="stylesheet" href="css/header.css" />
        <link rel="stylesheet" href="css/main.css">
	</head>
	<body>
		<div class="header">
			<div class="headerTop">
				<div class="logo"></div>
				<div class="search">
					<div class="icon"></div>
					<input type="text" placeholder="搜索商品名称" />
				</div>
				<div class="user"></div>
			</div>
			<div class="headerNav">
				<a href="" class="active">推荐</a>
				<a href="">手机</a>
				<a href="">智能</a>
				<a href="">电视</a>
				<a href="">笔记本</a>
				<a href="">家电</a>
				<input
					hidden="hidden"
					type="checkbox"
					name="choose"
					id="choose"
					value=""
				/>
				<label class="xhicon" for="choose"></label>
				<div class="xhk">
					<div class="xhkMain">
						<div class="xhkTop">全部</div>
						<div class="xhkList">
							<a href="" class="active">推荐</a>
							<a href="">手机</a>
							<a href="">智能</a>
							<a href="">电视</a>
							<a href="">笔记本</a>
							<a href="">家电</a>
							<a href="">生活周边</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 轮播 -->
		<div class="swiper"></div>

		<!-- 图标列表 -->
		<div class="iconList">
			<a href="" class="iconItem">
                <img src="img/icon1.png" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon2.webp" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon3.webp" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon4.webp" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon5.webp" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon6.webp" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon7.png" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon8.png" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon9.webp" alt="" />
            </a>
			<a href="" class="iconItem">
                <img src="img/icon10.png" alt="" />
            </a>
        </div>
        
        <!-- 广告banner
        .banner>(.lbanner+(.rbanner>(.rtbanner+.rbbanner))) 
        -->
        <div class="banner">
            <div class="lbanner"></div>
            <div class="rbanner">
                <div class="rtbanner"></div>
                <div class="rbbanner"></div>
            </div>
        </div> 

        <!-- 每日精选 
        -->
        <div class="jx">
            <div class="jxad"></div>
            <div class="pdList">
                <div class="pdItem">
                    <img src="img/jx1.jpg" alt="" >
                    <div class="tital">小米10 Pro</div>
                    <div class="brief">骁龙865 / 50倍变焦</div>
                    <div class="price">￥4999</div>
                    <div class="buybtn">立即购买</div>
                </div>
                <div class="pdItem">
                    <img src="img/jx2.jpg" alt="" >
                    <div class="tital">小米10</div>
                    <div class="brief">骁龙865/1亿像素相机</div>
                    <div class="price">￥3799</div>
                    <div class="buybtn">立即购买</div>
                </div>
                <div class="pdItem">
                    <img src="img/jx3.jpg" alt="" >
                    <div class="tital">Redmi K30 4G</div>
                    <div class="brief">120Hz流速屏，全速热爱</div>
                    <div class="price">￥1399</div>
                    <div class="buybtn">立即购买</div>
                </div>
                <div class="pdItem">
                    <img src="img/jx4.jpg" alt="" >
                    <div class="tital">Redmi K30 5G</div>
                    <div class="brief">双模5G，120Hz流速屏</div>
                    <div class="price">￥1599</div>
                    <div class="buybtn">立即购买</div>
                </div>
            </div>



        </div>

        <!-- 底部 -->
        <div class="footer">
            <div class="fIcon">
                <div class="img"></div>
                <span>首页</span>
            </div>
            <div class="fIcon">
                <div class="img"></div>
                <span>分类</span>
            </div>
            <div class="fIcon">
                <div class="img"></div>
                <span>星球</span>
            </div>
            <div class="fIcon">
                <div class="img"></div>
                <span>购物车</span>
            </div>
            <div class="fIcon">
                <div class="img"></div>
                <span>我的</span>
            </div>
        </div>

	</body>
</html>
